import {useState} from 'react'
import { 
  Input,
  InputGroup,
  InputLeftAddon,
  Checkbox,
  Menu,
  MenuButton,
  MenuList,
  MenuItem,
  Link,
  Button,
  useToast
} from '@chakra-ui/react'
import { FaUserAlt, FaLock } from 'react-icons/fa'
import axios from 'axios'

export default function SignIn() {
  const [email, setEmail] = useState('')
  const [password, setPassword] = useState('')
  const toast = useToast()
  const handleChange = (e,type) => {
    switch(type){
      case 'email':
        setEmail(e.target.value);
        break
      case 'password':
        setPassword(e.target.value);
        break
    }
  }
  const handleSubmit = async () => {
    const params = {
      user:{
        email,
        password
      }
    }
    const data = await axios.post('https://conduit.productionready.io/api/users/login',params)
    toast({
      title: "Success",
      description: "登录成功.",
      status: "success",
      duration: 9000,
      isClosable: true,
    })
  }
  return <form className="form">
    <InputGroup>
      <InputLeftAddon children={ <FaUserAlt /> } borderRadius="4px 0 0 0 "  height="50px"/>
      <Input name="email" value={email} placeholder="手机号或邮箱" borderRadius="0 4px 0 0" padding="4px 12px 4px 35px" height="50px" onChange={(e) => handleChange(e,'email')}/>
    </InputGroup>
    
    <InputGroup>
      <InputLeftAddon children={ <FaLock /> } borderRadius="0 0 0 4px" height="50px"/>
      <Input name="password" value={password} type="password" placeholder="密码" borderRadius="0 0 4px 0" padding="4px 12px 4px 35px" height="50px" onChange={(e) => handleChange(e,'password')}/>
    </InputGroup>
    
    
    <div className="form-helper">
      <Checkbox>记住我</Checkbox>
      <Menu>
        <MenuButton as={Link}>
        登录遇到问题？
        </MenuButton>
        <MenuList>
          <MenuItem><a href='/users/password/mobile_reset'>用手机号重置密码</a></MenuItem>
          <MenuItem><a href="/users/password/email_reset">用邮箱重置密码</a></MenuItem>
          <MenuItem><a target="_blank" href="/p/9058d0b8711d">无法用海外手机号登录</a></MenuItem>
          <MenuItem><a target="_blank" href="/p/498a9fa7da08">无法用 Google 帐号登录</a></MenuItem>
        </MenuList>
      </Menu>
    </div>
    
    <Button width="100%" colorScheme="telegram" borderRadius="25px" onClick={handleSubmit}>登录</Button>
  
  </form>
}